<template>
	<el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>{{tagname}}</span>
    </div>
    <div class="text item">
      <el-tree :data="codelist" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>
  </el-card>
</template>
<script>
import eventVue from '../../assets/eventVue'

export default {
  data () {
    return {
      codelist: null,
      tagname: null,
      defaultProps: {
        label: 'cname'
      }
    }
  },
  mounted () {
    eventVue.$on('listenToFillList', (message) => {
      this.baddingCodeList(message)
    })
  },
  methods: {
    handleNodeClick (data) {
      // console.log(data)
    },
    baddingCodeList (message) {
      // console.log(message)
      this.tagname = message.value
      var params = new URLSearchParams()
      params.append('tagid', message.key)

      this.$http.post(this.GLOBAL.serverSrc + this.GLOBAL.codefortag, params).then(
        response => {
          this.codelist = response.data
          console.log(response.data)
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>
<style>
  .text {
    font-size: 12px;
  }
  
  .clearfix > span{
    font-size: 14px;
    color: #C2C3C9;
  }
  .el-card__header{
    padding: 6px 20px;
  }
  .el-card__body{
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
  }
</style>